What is postcss-color-functional-notation?
The postcss-color-functional-notation package is a PostCSS plugin that transforms CSS color functions like `rgb()`, `rgba()`, `hsl()`, `hsla()`, `hwb()`, and `lab()` into a more modern and consistent functional notation. This helps in maintaining a consistent color format across your stylesheets and ensures compatibility with modern CSS standards.
What are postcss-color-functional-notation's main functionalities?
Transforming RGB/RGBA Notation
This feature transforms the traditional `rgb()` and `rgba()` functions into the modern space-separated notation. This makes the color definitions more consistent and easier to read.
/* Input CSS */
body {
color: rgb(255, 0, 0);
background-color: rgba(0, 255, 0, 0.5);
}
/* Output CSS */
body {
color: rgb(255 0 0);
background-color: rgb(0 255 0 / 0.5);
}
Transforming HSL/HSLA Notation
This feature converts the `hsl()` and `hsla()` functions into the modern space-separated notation, making the color definitions more consistent and easier to read.
/* Input CSS */
body {
color: hsl(120, 100%, 50%);
background-color: hsla(240, 100%, 50%, 0.5);
}
/* Output CSS */
body {
color: hsl(120 100% 50%);
background-color: hsl(240 100% 50% / 0.5);
}
Transforming HWB Notation
This feature transforms the `hwb()` function into the modern space-separated notation, ensuring consistency and readability in color definitions.
/* Input CSS */
body {
color: hwb(120, 0%, 0%);
}
/* Output CSS */
body {
color: hwb(120 0% 0%);
}
Transforming LAB Notation
This feature converts the `lab()` function into the modern space-separated notation, making the color definitions more consistent and easier to read.
/* Input CSS */
body {
color: lab(50, 0, 0);
}
/* Output CSS */
body {
color: lab(50 0 0);
}
Other packages similar to postcss-color-functional-notation
postcss-preset-env
postcss-preset-env allows you to use future CSS features today by converting modern CSS into something most browsers can understand. It includes a variety of plugins, including one for transforming color functions, making it a more comprehensive solution compared to postcss-color-functional-notation.
postcss-color-mod-function
postcss-color-mod-function is a PostCSS plugin that transforms the `color-mod()` function, which allows for color manipulation. While it focuses on color modification rather than notation transformation, it provides advanced color manipulation capabilities that complement the features of postcss-color-functional-notation.
postcss-color-rebeccapurple
postcss-color-rebeccapurple is a PostCSS plugin that transforms the `rebeccapurple` color keyword to its equivalent hex value. While it has a more specific use case, it can be used alongside postcss-color-functional-notation for comprehensive color transformations.
PostCSS Color Functional Notation
PostCSS Color Functional Notation lets you use space and slash separated
color notation in CSS, following the CSS Color specification.
:root {
--firebrick: rgb(178 34 34);
--firebrick-a50: rgb(70% 13.5% 13.5% / 50%);
--firebrick-hsl: hsla(0 68% 42%);
--firebrick-hsl-a50: hsl(0 68% 42% / 50%);
}
/* becomes */
:root {
--firebrick: rgb(178, 34, 34);
--firebrick-a50: rgba(178, 34, 34, .5);
--firebrick-hsl: hsl(0, 68%, 42%);
--firebrick-hsl-a50: hsla(0, 68%, 42%, .5);
}
Usage
Add PostCSS Color Functional Notation to your build tool:
npm install postcss-color-functional-notation --save-dev
Node
Use PostCSS Color Functional Notation to process your CSS:
import postcssColorFunctionalNotation from 'postcss-color-functional-notation';
postcssColorFunctionalNotation.process(YOUR_CSS, , );
PostCSS
Add PostCSS to your build tool:
npm install postcss --save-dev
Use PostCSS Color Functional Notation as a plugin:
import postcss from 'gulp-postcss';
import postcssColorFunctionalNotation from 'postcss-color-functional-notation';
postcss([
postcssColorFunctionalNotation()
]).process(YOUR_CSS);
Webpack
Add PostCSS Loader to your build tool:
npm install postcss-loader --save-dev
Use PostCSS Color Functional Notation in your Webpack configuration:
import postcssColorFunctionalNotation from 'postcss-color-functional-notation';
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
{ loader: 'postcss-loader', options: {
ident: 'postcss',
plugins: () => [
postcssColorFunctionalNotation()
]
} }
]
}
]
}
}
Gulp
Add Gulp PostCSS to your build tool:
npm install gulp-postcss --save-dev
Use PostCSS Color Functional Notation in your Gulpfile:
import postcss from 'gulp-postcss';
import postcssColorFunctionalNotation from 'postcss-color-functional-notation';
gulp.task('css', () => gulp.src('./src/*.css').pipe(
postcss([
postcssColorFunctionalNotation()
])
).pipe(
gulp.dest('.')
));
Grunt
Add Grunt PostCSS to your build tool:
npm install grunt-postcss --save-dev
Use PostCSS Color Functional Notation in your Gruntfile:
import postcssColorFunctionalNotation from 'postcss-color-functional-notation';
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
use: [
postcssColorFunctionalNotation()
]
},
dist: {
src: '*.css'
}
}
});
Options
preserve
The preserve
option determines whether the original functional color notation
is preserved. By default, it is not preserved.
postcssImageSetFunction({ preserve: true })
:root {
--firebrick: rgb(178 34 34);
--firebrick-a50: rgb(70% 13.5% 13.5% / 50%);
--firebrick-hsl: hsla(0 68% 42%);
--firebrick-hsl-a50: hsl(0 68% 42% / 50%);
}
/* becomes */
:root {
--firebrick: rgb(178, 34, 34);
--firebrick: rgb(178 34 34);
--firebrick-a50: rgba(178, 34, 34, .5);
--firebrick-a50: rgb(70% 13.5% 13.5% / 50%);
--firebrick-hsl: hsl(0, 68%, 42%);
--firebrick-hsl: hsla(0 68% 42%);
--firebrick-hsl-a50: hsla(0, 68%, 42%, .5);
--firebrick-hsl-a50: hsl(0 68% 42% / 50%);
}